<script setup lang="ts">
import { onUnmounted, ref } from 'vue'
import MessageMain from './messageMain.vue';
import { CloseBold, Promotion } from '@element-plus/icons-vue'

// 窗口状态控制
const isMinimized = ref(true);
const windowSize = ref({ width: 800, height: 520 });
const windowPos = ref({ x: 20, y: 20 });

// 拖动相关状态
const isDragging = ref(false);
const startPos = ref({ x: 0, y: 0 });
const initialPos = ref({ x: 0, y: 0 });

// 窗口拖动处理
const handleWindowMouseDown = (e: MouseEvent) => {
  isDragging.value = true;
  startPos.value = { x: e.clientX, y: e.clientY };
  initialPos.value = { x: windowPos.value.x, y: windowPos.value.y };
};

const handleMouseMove = (e: MouseEvent) => {
  if (isDragging.value) {
    requestAnimationFrame(() => {
      const dx = e.clientX - startPos.value.x;
      const dy = e.clientY - startPos.value.y;
      windowPos.value = {
        x: initialPos.value.x + dx,
        y: initialPos.value.y + dy
      };
    });
  }
};

const handleMouseUp = () => {
  isDragging.value = false;
};

// 最小化窗口
const minimizeWindow = () => {
  isMinimized.value = true;
};

// 初始化事件监听
window.addEventListener('mousemove', handleMouseMove);
window.addEventListener('mouseup', handleMouseUp);

onUnmounted(() => {
  window.removeEventListener('mousemove', handleMouseMove);
  window.removeEventListener('mouseup', handleMouseUp);
});
</script>

<template>
  <!-- 小图标状态 -->
  <div
    v-if="isMinimized"
    class="chat-icon"
    :style="{
      transform: `translate(${windowPos.x}px, ${windowPos.y}px)`, /* 使用 transform 代替 left/top */
      cursor: isDragging ? 'grabbing' : 'grab' /* 改进光标反馈 */
    }"
    @mousedown="handleWindowMouseDown"
    @dblclick="isMinimized = false"
  >

    <img src="@/assets/kefu.png" width="80px" style="border-radius: 40px" alt="Chat Icon" />
  </div>

  <!-- 窗口状态 -->
  <div
    v-else
    class="chat-window"
    :style="{
      width: windowSize.width + 'px',
      height: windowSize.height + 'px',
      left: windowPos.x + 'px',
      top: windowPos.y + 'px'
    }"

  >
    <div class="window-header" @mousedown="handleWindowMouseDown">
      <span>聊天窗口</span>
      <el-button
        class="minimize-btn"
        :icon="CloseBold"
        @click="minimizeWindow"
      />
    </div>
    <div class="window-content">
      <MessageMain />
    </div>
  </div>
</template>

<style scoped lang="scss">
.chat-icon {
  will-change: transform; /* 提升渲染性能 */
  transition: transform 0.1s; /* 添加平滑过渡 */
  /* 保持原有图标样式 */
  position: fixed;
  z-index: 9999;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #409eff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}

.chat-window {
  position: fixed;
  z-index: 9998;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  //resize: both;
  //overflow: hidden;
  display: flex;
  flex-direction: column;

  .window-header {
    padding:5px 28px;
    font-size: 18px;
    background: #409eff;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: move;

    .minimize-btn {
      padding: 6px;
      background: transparent;
      border: none;
      color: white;
    }
  }

  .window-content {
    flex: 1;
    overflow: hidden;
    background: #dae6d7;
  }
}
</style>
